<template>
	<div class="box">
		<div class="nav width-max fixed">
			<head-page title="生命篇">
				
			</head-page>
		</div>
		<div class="bottom">
			<div class="center">
				<div class="header">
					<h3 class="flex aic">
						<img
							src="../../../assets/blue_star.png"
							class="star m-r-10"
							alt=""
						/>
						<div>{{ this.$route.query.i }}</div>
					</h3>
					<!-- 图片区域 -->
					<div class="tu">
						<van-swipe
							class="my-swipe"
							:autoplay="3000"
							indicator-color="white"
						>
							<van-swipe-item
								v-for="(item, index) in info.lifePic"
								:key="index"
							>
								<img :src="getImgUrl(item)" alt="" />
							</van-swipe-item>
						</van-swipe>
						<!-- <img :src="imgUrl + info.lifePic" alt="" /> -->
					</div>
				</div>

				<!-- 内容区域 -->
				<div class="context">
					<h3 class="flex aic">产品介绍</h3>
					<div class="m-t-10 richText" v-html="info.lifeText"></div>
				</div>
			</div>
		</div>
	</div>
</template>
  
  <script>
import { getLifeDetail } from "@/api/index"
export default {
	data() {
		return {
			info: {},
		}
	},
	mounted() {
		getLifeDetail({
			lifeTitle: this.$route.query.i
		}).then(res => {
			if (res.data.code == 200) {
				let newData = Object.assign(
					{},
					this.info,
					res.data.data
				)
				this.info = newData
				this.info.lifeText = this.dataHTML(newData.lifeText)
				this.info.lifePic = newData.lifePic.split(',')
			}
		})
	},
	methods: {
		onClickLeft() {
			this.$router.go(-1)
		},

		// 拼接图片地址
		getImgUrl(img) {
			return this.montageImgUrl(img)
		},
	}
}
  </script>
  
  <style scoped>
.box {
	width: 100%;
	height: calc(100vh - 0.55rem);
	background-color: #f0eff5;
	overflow: auto;
}
.nav {
	z-index: 66;
}
/* 底部区域 */
.bottom {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 0.32rem;
}
.header {
	background: #fff;
	padding: 0 0.1rem;
}
/* 版心区域 */
.center {
	width: 100%;
}
h3 {
	height: 0.3rem;
	line-height: 0.3rem;
	text-align: center;
}
.star {
	width: 0.18rem;
	height: 0.18rem;
}
/* 图片区域 */
.tu {
	width: 100%;
	padding-bottom: 0.1rem;
}
.tu img {
	width: 100%;
}
/* 内容区域 */
.context {
	width: 100%;
	margin-top: 0.05rem;
	background-color: white;
	padding: 0.1rem;
	box-sizing: border-box;
}
.van-swipe-item {
	height: 1.5rem;
}

.van-swipe-item img {
	width: 100%;
	height: 1.5rem;
}
</style>